<template>
	<div class="page" :class="showClass ? 'elasticity' : 'hard'">
		<div class="page-parmary">
			<img class="page-parmary-img" src="@/assets/images/page-Img.png" />
			<div class="page-parmary-item">
				<!-- sdr参数设置 -->
				<device-form :isRun="isRun" @run="run" @stop="stop" :pagePar="pagePar" :isChannel="isChannel"
					:socketObj="socketObj"></device-form>
			</div>

			<div class="page-parmary-item page-title">
				<img class="page-title-img" src="@/assets/images/page-title-img.png" @click="showClass = !showClass" />
				<span @click="goBay">{{ !pagePar ? '台站测量分析' : '信道测量分析' }}</span>
			</div>

			<div class="page-parmary-item page-title-right">
				<div class="page-time-node">
					<img class="page-time-img" src="@/assets/images/timer.png" />
					<span>2024-03-06 15:30:23</span>
				</div>
				<div v-if="!pagePar">
					<el-button v-if="isRun" type="info" round style="background-color: #394760; border: none;"
						@click="goBay">
						<img class="bottom-img" src="@/assets/images/gobay.png" />信道测量分析
					</el-button>
					<el-button type="info" round icon="el-icon-plus" class="openPage"
						@click="openPage">台站测量分析</el-button>
				</div>
				<div class="full-bottom" :title="!isFull ? '全屏' : '退出全屏'" @click="fullPage">
					<i class="el-icon-full-screen" v-if="!isFull"></i>
					<img class="page-time-img" src="@/assets/images/outFull.png" style="margin: 0;" v-else>
				</div>
			</div>

		</div>

		<!-- 图表 -->
		<div class="chart-demo">
			<div v-if="!isChannel" style="position: relative;width: 100%;height: 100%;">
				<div style="position: absolute;width: 100%;height: 100%;">
					<pageAnalyse :showClass="showClass" :change="change" layout="one" style="width: 100%;height: 100%;"
						:socketObj="socketObj" />
				</div>
			</div>

			<div v-else class="chart-all-page">
				<div class="chart-item" v-for="item in winPageList" :key="item.page">
					<div class="chart-item-title">
						{{ item.title }}
						<div class="chart-item-bottom-group">
							<i class="el-icon-minus chart-item-bottom" title="缩小" @click="lessen(item.index)"></i>
							<i class="el-icon-full-screen chart-item-bottom" title="铺满" @click="full(item.index)"></i>
						</div>
					</div>
					<pageAnalyse v-if="item.page == 'pageAnalyse'" class="chart-item-content"
						:layout="winPageList.length == 1 ? 'one' : 'all'" :showClass="showClass" :change="change"
						:socketObj="socketObj" />
					<pageSignal v-if="item.page == 'pageSignal'" class="chart-item-content"
						:layout="winPageList.length == 1 ? 'one' : 'all'" :showClass="showClass" :change="change"
						:socketObj="socketObj" />
					<pageChannel v-if="item.page == 'pageChannel'" class="chart-item-content"
						:layout="winPageList.length == 1 ? 'one' : 'all'" :showClass="showClass" :change="change"
						:socketObj="socketObj" />
					<pageLink v-if="item.page == 'pageLink'" class="chart-item-content"
						:layout="winPageList.length == 1 ? 'one' : 'all'" :showClass="showClass" :change="change"
						:socketObj="socketObj" />
				</div>
				<div class="chart-all-min-page" v-if="winBottomList.length > 0">
					<div v-for="item in winBottomList" class="chart-all-min-bottom">
						<img class="chart-all-min-bottom-group" src="@/assets/images/group-bottom.png" title="显示"
							@click="show(item.index)" />
						<i class="el-icon-full-screen chart-all-min-bottom-full" title="铺满"
							@click="full(item.index)"></i>
						<span class="chart-all-min-bottom-name">{{ item.title }}</span>
					</div>
				</div>
			</div>
		</div>
		<!-- <div id="plot_container" style="width: 25%; height: 25%;">App Control:</div> -->
		<!-- <div style="display: flex;"> -->
		<!-- <div id="plot_container1" style="width: 50%; height: 25%;">App Control:</div>
			<div id="plot_container2" style="width: 50%; height: 25%;">App Control:</div>
			<div id="plot_container3" style="width: 50%; height: 25%;">App Control:</div>
			<div id="plot_container4" style="width: 50%; height: 25%;">App Control:</div> -->
		<!-- </div> -->
	</div>
</template>

<script>
import deviceForm from './components/deviceForm.vue'; // 电台参数设置
import pageAnalyse from './components/pageAnalyse.vue'; // 信道可用分析
import pageSignal from './components/pageSignal.vue'; // 信号域
import pageChannel from './components/pageChannel.vue'; // 信道域
import pageLink from './components/pageLink.vue'; // 链路域
import socketApi from '@/api/socketApi' // socketApi
import { getToken } from "@/utils/auth";

const baseSize = 20
export default {
	name: "analys_page",
	components: { deviceForm, pageAnalyse, pageSignal, pageChannel, pageLink },
	data() {
		return {
			wsUrl: 'ws://192.168.1.252:9208?',
			// 自定义socket实例
			socketObj: null,
			// 当前页面的参数、区分子页面还是父页面
			pagePar: null,
			// 设置的数据
			parmary: {},
			// 当前主题true：自适应，false:固定px
			showClass: true,
			// 变化
			change: false,
			// 是否已开始运行
			isRun: false,
			// 是否开启全屏
			isFull: false,
			// 是否信道测量
			isChannel: false,
			// 所有子窗口
			allPage: [
				{ page: 'pageSignal', title: '信号域', type: 'min', index: 0 },
				// { page: 'pageChannel', title: '信道域', type: 'min', index: 1 },
				// { page: 'pageLink', title: '链路域', type: 'min', index: 2 }
			],
		};
	},
	watch: {
		showClass() {
			this.updateDom()
		},
		winPageList() {
			this.updateDom()
		},
	},
	computed: {
		// 小窗口内容
		winPageList() {
			return this.allPage.filter(item => item.type == 'min')
		},
		// 按钮类容
		winBottomList() {
			return this.allPage.filter(item => item.type == 'bottom')
		},
	},
	created() {
		this.initPageParmars();
		this.initSocket();
		// 适配分辨率
		this.initPageSize();
		window.addEventListener('resize', this.initPageSize)
		window.addEventListener('resize', this.updateDom)

		// initEnviroment({
		// 	success: () => {
		// 		setTimeout(this.initLotDom, 1000)
		// 	},
		// 	error: er => {
		// 		console.log("失败")
		// 	}
		// });

	},
	methods: {
		// 初始化页面参数
		initPageParmars() {
			// 获取参数
			let pagePar = null;
			try {
				pagePar = window.opener['filter'];
			} catch (e) { }
			if (pagePar) {
				document.title = '信道测量分析';
				this.pagePar = pagePar;
				this.isChannel = true;
			} else {
				document.title = '台站测量分析';
				this.isChannel = false;
			}
		},
		// 初始化socket连接
		initSocket() {
			// 连接socket携带token信息用于鉴权
			// this.wsUrl = 'ws://192.168.1.97:9208?'
			const wsuri = this.wsUrl + encodeURIComponent(JSON.stringify({ authorization: getToken() }));
			this.socketObj = new socketApi({
				url: wsuri,
				name: this.pagePar ? '信道测量' : '台站测量',
				// openSucceed: () => { console.log("连接成功") },
				closedFn: () => { console.log("断开连接了"); this.isRun = false; }
			})
		},
		// 启动数据全频段or下变频
		run(parmary) {
			// 用于开启下变频传递的数据
			this.parmary = JSON.parse(JSON.stringify(parmary));
			if (this.socketObj.socket.readyState != WebSocket.OPEN) {
				this.$message.error('socket未连接...')
				return;
			}
			this.isRun = true;
			if (this.socketObj.socket.readyState != WebSocket.OPEN) return;
			if (!this.pagePar) {
				// 启动全频段
				this.startFull();
			} else {
				if (parmary.modem != 'lfm') {
					this.allPage = [
						{ page: 'pageSignal', title: '信号域', type: 'min', index: 0 },
						// { page: 'pageChannel', title: '信道域', type: 'min', index: 1 },
						{ page: 'pageLink', title: '链路域', type: 'min', index: 1 }
					];
				} else {
					this.allPage = [
						{ page: 'pageSignal', title: '信号域', type: 'min', index: 0 },
						{ page: 'pageChannel', title: '信道域', type: 'min', index: 1 },
						// { page: 'pageLink', title: '链路域', type: 'min', index: 1 }
					];
				}
				// 启动下变频
				this.startChannel();
			}

		},
		// 启动全频段
		startFull() {
			const { radioStationCode, central, bandwidth, sample_frequence, modem } = this.parmary;
			this.socketObj.sendUuid({
				cmd: 'start-full',
				data: {
					radioStationCode, // 电台ID
					central, // 中心频率 hz
					bandwidth, // 带宽默认 12000, hz
					sample_frequence, // 注意： 采样率，应该和带宽一致
					modem, // 解调类型 客户端上传 modem 类型， 可选有 none,c0,c1,c3,c13,c4,ft8,lfm,lora 等 , 默认none
					"type": "channel", // ##保留原样，为了区分 《停止全频段》 和 《停止某一个》 下变频
					"resolution_ratio": 8000, // 分辨率，可由带宽和点数自动计算 
					"points": 1024, // fft变换之后的点数，也就是一个数据包的点数 
					"mode": "ssb" // 调制方式 ssb 或 am， 默认 ssb
				}
			}).then(rs => {
				if (rs.code != 200) {
					this.isRun = false;
					this.$message.warning(`启动失败${rs.msg}`)
				} else {
					this.$message.success(`启动成功`)
				}
			})
		},
		// 启动下变频
		startChannel() {
			const { radioStationCode, central, bandwidth, sample_frequence, modem } = this.parmary;
			this.socketObj.sendUuid({
				cmd: 'start-channel',
				data: {
					radioStationCode, // 电台ID
					central, // 中心频率 hz
					bandwidth: sample_frequence, // 带宽默认 12000, hz
					sample_frequence, // 注意： 采样率，应该和带宽一致
					modem, // 解调类型 客户端上传 modem 类型， 可选有 none,c0,c1,c3,c13,c4,ft8,lfm,lora 等 , 默认none
					"type": "channel", // ##保留原样，为了区分 《停止全频段》 和 《停止某一个》 下变频
					"resolution_ratio": 8000, // 分辨率，可由带宽和点数自动计算 
					"points": 1024, // fft变换之后的点数，也就是一个数据包的点数 
					"mode": "ssb" // 调制方式 ssb 或 am， 默认 ssb
				}
			}).then(rs => {
				if (rs.code != 200) {
					this.isRun = false;
					this.$message.warning(`启动失败${rs.msg}`)
				} else {
					this.$message.success(`启动成功`)
				}
			})
		},
		// 断开socket连接
		stop() {
			// this.socketObj.close();
			this.isRun = false;
		},
		// 加载插件
		initLotDom() {
			//type: ['time', 'spectum', 'waterfall',  'mesh'];
			initLot([
				{ dom: document.getElementById("plot_container1"), type: "time", name: "time2" },
				{ dom: document.getElementById("plot_container2"), type: "time", name: "time2" },
				{ dom: document.getElementById("plot_container3"), type: "time", name: "time2" },
				{ dom: document.getElementById("plot_container4"), type: "time", name: "mesh1" }
			])
		},
		// 缩小窗口
		lessen(index) { this.allPage[index].type = 'bottom' },
		// 显示小窗口
		show(index) { this.allPage[index].type = 'min' },
		// 全屏查看
		full(index) {
			for (let i = 0; i < this.allPage.length; i++) {
				if (i != index) {
					this.allPage[i].type = 'bottom'
				} else {
					this.allPage[i].type = 'min'
				}
			}
		},

		// 打开信道展示页面
		openPage() {
			window.open('/large/analys_page', '_blank')
		},
		// 开始测量
		goBay() {
			let par = JSON.parse(JSON.stringify(this.parmary))
			delete par.sample_frequence;
			window['filter'] = par;
			window.open('/large/analys_page', '_blank')
		},
		// 打开全屏
		fullPage() {
			if (!document.fullscreenElement) {
				// 进入全屏
				document.documentElement.requestFullscreen();
				this.isFull = true;
			} else {
				// 退出全屏
				if (document.exitFullscreen) {
					this.isFull = false;
					document.exitFullscreen();
				}
			}
		},
		// 适配分辨率
		initPageSize() {
			const scale = document.documentElement.clientWidth / 3072;
			const fontSize = baseSize * Math.min(scale, 2) + 'px';
			document.documentElement.style.fontSize = fontSize;
		},
		// 更新所有子页面
		updateDom() {
			this.change = !this.change
		}

	},
	beforeDestroy() {
		window.removeEventListener('resize', this.initPageSize)
		window.removeEventListener('resize', this.updateDom)
		// 删除全频段的数据监听
		if (this.socketObj) this.socketObj.removeMsgBack({ cmd: 'start-channel' })
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './css/hard.css';
@import './css/elasticity.css';
@import './css/index.css';
</style>
